<!-- 倒计时 -->
<template>
    <div class="count-down-back">
        <text :style="getStyle" class="count-down font-msyhl" v-if="day > 0">{{day}}天</text>
        <text :style="getStyle" class="count-down font-msyhl">{{hour}}</text>
        <text :style="getStyle" class="colon font-msyhl">:</text>
        <text :style="getStyle" class="count-down font-msyhl">{{minute}}</text>
        <text :style="getStyle" class="colon font-msyhl">:</text>
        <text :style="getStyle" class="count-down font-msyhl">{{seconds}}</text>
    </div>
</template>

<style scoped>
    .count-down-back {
        flex-direction: row;
        align-items:center;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
    import modal from 'utils/modal';

    function isIOS(){
        return weex.config.env ? weex.config.env.platform === 'iOS' : false;
    }

    export default {
        props: {
            beginStr: {
                type: String,
                required: true
            },
            endStr: {
                type: String,
                required: true
            },
            fontSize: {
                type: Number,
                default: 26
            },
            color: {
                type: String,
                default: '#e31336'
            }
        },
        data(){
            return {
                begin: 0,
                end: 0,
                day: 0,
                hour: 0,
                minute: 0,
                seconds: 0,
                timer: null
            }
        },
        created(){
            this.end = this.timeStrFormat(this.endStr);
            this.begin = this.timeStrFormat(this.beginStr);
            if (this.begin < this.end) {
                this.timer = setInterval(this.start.bind(this), 1000);
            } else {
                this.$emit('over', false);
            }
        },
        methods: {
            fixNum(val) {
                if (val < 10) {
                    return '0' + val;
                }
                return val;
            },
            start() {
                this.begin = this.begin + 1000;
                var interval = (this.end - this.begin) / 1000;
                if (interval > 0) {
                    this.day = this.fixNum(parseInt(interval / 60 / 60 / 24));
                    this.hour = this.fixNum(parseInt((interval / 60 / 60 % 24)));
                    this.minute = this.fixNum(parseInt(interval / 60 % 60));
                    this.seconds = this.fixNum(parseInt(interval % 60));
                } else {
                    this.stop();
                    this.$emit('over', false);
                }
            },
            stop() {
                clearInterval(this.timer);
                this.timer = null;
            },
            timeStrFormat(timeStr) {
                if(!timeStr || timeStr == '') {
                    return new Date().getTime();
                }
                if(isIOS()) {
                   timeStr = timeStr.replace(/\-/g,'/');
                }
                return new Date(timeStr).getTime();
            }
        },
        computed: {
            getStyle(){
                return {
                    fontSize: this.fontSize,
                    color: this.color
                }
            }
        },
        destroyed() {
            this.stop();//组件销毁
        }
    }
</script>